import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { reloadTab } from '@/utils/utils';
import { notification } from 'antd';
import { Button, Modal, Space, Form, Row, Col } from 'antd';
import { } from '@/common/contact';
import FormCondition from '@/components/FormCondition';
import { useUpdateEffect } from 'ahooks';
import PopImgShow from '@/components/PopImgShow';
import { goodsType_status, commission_type } from '@/common/contact'
const ShopModel = (props) => {
    const {
        visible = {},
        onClose,
        loading,
        shopList,
        dispatch,
        onChange,
    } = props;
    const { show = false, detail = {}, title,
        params = {} } = visible;
    const { list = [], disabledList = [] } = detail

    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const childRef = useRef();
    useEffect(() => {
        if (show) {
            setSelectedRowKeys(list)
        }
        else {
            setSelectedRowKeys([])
        }
    }, [show])
    const rowSelectionChecked = {
        type: 'radio',
        hideSelectAll: true,
        getCheckboxProps: (record) => {
            return {
                disabled: disabledList.reduce((item, index) => {
                    if (item) {
                        return item
                    }
                    else {
                        if (index.id === record.id) {
                            return true
                        }
                        return item
                    }
                }, false)
                ,
                // Column configuration not to be checked
                id: record.id,
            };
        },
        onSelect: (record, selected) => {
            setSelectedRowKeys([record]);
        },
        selectedRowKeys: selectedRowKeys.map((item) => {
            return item.goodsId.toString();
        }),
        preserveSelectedRowKeys: true,
    };

    const searchItems = [
        {
            label: '商品名称',
            name: 'keyword',
        },
    ];
    const handleUpAudit = () => {

        onChange && onChange(selectedRowKeys[0])
        onClose()
    };
    const getColumns = [
        {
            title: '商品信息',
            align: 'left',
            style: { textAlign: 'left' },
            width: 180,
            dataIndex: 'cover',
            render: (e, record) => {
                const { goodsName, price, priceType } = record
                return <Space>
                    <PopImgShow url={e}></PopImgShow>
                    <div>
                        <div> {goodsName}</div>
                        <div>{priceType === 'free' ? '--' : price}</div>
                    </div>
                </Space>
            }
        },
        {
            title: '商品类型 ',
            dataIndex: 'goodsType',
            render: (e) => {
                return goodsType_status[e]
            }
        },
        {
            title: '推广价',
            dataIndex: 'promoterPrice',
        },
    ];
    const modalProps = {
        title: '选择推广商品',
        width: 900,
        visible: show,
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 2002,
        confirmLoading: loading,
        footer: <Space>
            <Button onClick={() => onClose()}>取消</Button>
            <Button type='primary' onClick={() => handleUpAudit()}>确定</Button>
        </Space>
    };

    return (
        <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
            <TableDataBlock
                params={{
                    ...params,
                }}
                rowSelection={rowSelectionChecked}
                searchItems={searchItems}
                cRef={childRef}
                loading={loading}
                columns={getColumns}
                rowKey={(record) => `${record.goodsId.toString()}`}
                dispatchType="promoter/fetchListPromoterGoods"
                {...shopList}
            ></TableDataBlock>
        </Modal>
    );
};

export default connect(({ promoter, loading }) => ({
    shopList: promoter.promoterGoodsList,
    loading: loading.models.promoter,
}))(ShopModel);
